<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>verifyEmail</title>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
        background: url(/img/loginLibrary.jpg);

        font-family: sans-serif;
        background-size: cover;

    }
    .button {
        display: inline-block;
        border-radius: 4px;
        background-color: #f4511e;
        border: none;
        color: #FFFFFF;
        text-align: center;
        font-size: 15px;
        padding: 6px;
        /*width: 100%;*/
        transition: all 0.5s;
        cursor: pointer;
        margin: 5px;

    }
    .button1{width: 100%;}
    .button2{width: 35%;}
    .button3{width: 35%;
        position: relative;
        left:80px;
    }

    .button span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }



    .button1 span:after {
        content: '»';
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
    }
    .button3 span:after {
        content: '»';
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
    }

    .button2 span:after {
        content: '«';
        position: absolute;
        opacity: 0;
        top: 0;
        left: -20px;
        transition: 0.5s;
    }

    .button1:hover span {
        padding-right: 10px;
    }
    .button2:hover span {
        padding-left: 10px;
    }
    .button3:hover span {
        padding-right: 10px;
    }

    .button1:hover span:after {
        opacity: 1;
        right: 0;
    }
    .button2:hover span:after {
        opacity: 1;
        left: 0;
    }
    .button3:hover span:after {
        opacity: 1;
        right: 0;
    }

    .box{

        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 400px;
        padding: 40px;
        background: rgba(0,0,0,.8);
        box-sizing: border-box;
        box-shadow: 0 15px 25px rgba(0,0,0,.5);
        border-radius: 10px;


    }
    .codeimgbox{
        margin:0 auto;
        width:300px ;
        height: 55px;
        position: relative;
        left: 70px;
    }
    .codeimg{
        width: 160px;
        height: 55px;
    }
    .box h2{
        margin: 0 0 30px;
        padding: 0;
        color: #fff;
        text-align: center;
    }
    .box .inputBox {
        position: relative;
    }
    .box .inputBox input{
        width: 100%;
        text-align: center;
        padding: 10px 0;
        font-size: 18px;
        color: #ffffff;
        margin-bottom: 10px;
        border-bottom: 1px solid #fff;
        outline: none;
        background: transparent;

    }
</style>
<body>
<div class="box">
    <h2>验证邮箱</h2>
<form th:action="@{sendCodeToEmail}" method="GET">
   <div class="inputBox">
    <input type="text" name="email" id="email" placeholder="邮箱">
   </div>

    <td>
        <button class="button button1" th:href="@{sendCodeToEmail(email=${email})}" type="submit" onclick="return ischeckemail()"><span>获取验证码</span></button>
    </td>

</form>



<a  th:href="@{login}"><button class="button button2" type="button"><span>返回登录</span></button></a>
<a th:href="@{registUser}"><button class="button button3" type="button"><span>注册</span></button></a>
</div>
</body>
<script type="text/javascript">
    function ischeckemail(){
        var emailName = document.getElementById("email").value;
        if(emailName==""){
            alert("邮箱不能为空，请重新输入！");
            document.getElementById("email").focus();
            return false;
        }


        if(emailName != "") {
            var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
            //调用正则验证test()函数
            isok= reg.test(emailName);
            if(!isok) {
                alert("邮箱格式不正确，请重新输入！");
                document.getElementById("email").focus();
                return false;
            }
        };
    }
</script>

</html>